﻿@using BaBaoFan.Modifier.Model
@model IEnumerable<NavigationInfo>
@{
    ViewData["Title"] = "八宝饭数据修改器";
}
<div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">网址名称</label>
                <div class="layui-input-inline">
                    <input id="input-navigationName" type="text" name="navigationName" class="layui-input">
                </div>
            </div>
            <button id="btn-search" class="layui-btn">查询</button>
            <button id="btn-reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>

        <div class="layui-form-item">
            <div class="layui-btn-group btn-operation">
                @*<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>*@
                <button class="layui-btn" id="btn-add" data-type="add">添加数据</button>
                <button class="layui-btn" data-type="deleteSelectAll">删除选中的</button>
                <button class="layui-btn" data-type="isCheck">已审核</button>
                <button class="layui-btn" data-type="notCheck">未审核</button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-btn-group btn-operation" id="navigationColumn">
            </div>
        </div>
        <table lay-filter="navigation-table" id="navigationTable" hidden="hidden">
            <thead>
                <tr>
                    <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                    <th lay-data="{field:'id', width:80}">Id</th>
                    <th lay-data="{field:'name', width:150}">名称</th>
                    <th lay-data="{field:'logo', width:150}">图标</th>
                    <th lay-data="{field:'description', width:150}">网站简介</th>
                    <th lay-data="{field:'link', width:150}">网站链接</th>
                    <th lay-data="{field:'parentName', width:100}">父级</th>
                    <th lay-data="{field:'playState', width:120,templet:'<div>{{ stateFormat(d.playState)}}</div>'}">显示状态</th>
                    <th lay-data="{field:'homeState', width:120,templet:'<div>{{ stateFormat(d.homeState)}}</div>'}">首页是否显示</th>
                    <th lay-data="{field:'check', width:120,templet:'<div>{{ checkFormat(d.check)}}</div>'}">审核</th>
                    <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#navigation-bar'}">操作</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td></td>
                        <td>@item.Id</td>
                        <td>@item.Name</td>
                        <td>@item.Logo</td>
                        <td>@item.Description</td>
                        <td>@item.Link</td>
                        <td>@item.ParentName</td>
                        <td>@item.PlayState</td>
                        <td>@item.HomeState</td>
                        <td>@item.Check</td>
                    </tr>
                }
            </tbody>
        </table>
        <script type="text/html" id="navigation-bar">
            @*<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>*@
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>
</div>

<script>
    function stateFormat(state) {
        if (state == "0")
            return "隐藏";
        else
            return "显示";
    }
    function checkFormat(isCheck) {
        if (isCheck)
            return "已审核";
        else
            return "未审核";
    }
    //加载栏目的button
    function loadColumnBtn() {
        $.ajax({
            url: "/Navigation/GetAllNavigationColumn",
            type: "GET",
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    $("#navigationColumn").append("<button class='layui-btn' data-id='" + data[i].id + "'>" + data[i].name + "</button>");
                }
                $("#navigationColumn").append("<button class='layui-btn' data-id='-1'>子类</button>");
                $("#navigationColumn").append("<button class='layui-btn' data-id='-2'>其他</button>");
            }
        })
    }
    layui.use('table', function () {
        var table = layui.table;
        var form = layui.form;

        loadColumnBtn();

        table.init('navigation-table', { //转化静态表格
            //height: 'full-500'
            page: true,
            limit: 20
        });

        table.reload("navigationTable", {
            url: '/Navigation/Search',
            method: 'POST', //方式
            id: 'navigationTable',
            loading: true,
            page: true
        });

        //$("#algorithmTable").show();//渲染完成之后显示
        //监听工具条
        table.on('tool(navigation-table)', function (obj) {
            var row = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        type: 'POST',
                        url: '/Navigation/DeleteNavigationInfo',
                        data: { ids: row.id },
                        success: function (data) {
                            console.log(data);
                            if (data == "ok") {
                                obj.del();
                                layer.close(index);
                            }
                        },
                        //dataType: 'JSON'
                    });
                });
            } else if (obj.event === 'edit') {
                window.location.href = "/Navigation/EditNavigationInfo?id=" + row.id;
            }
        });

        var $ = layui.$, active = {
            deleteSelectAll: function () { //批量删除
                var checkStatus = table.checkStatus('navigationTable');
                data = checkStatus.data;
                if (data.length <= 0)
                    return;
                var list = [];

                for (var i = 0; i < data.length; i++) {
                    list[i] = data[i].id;
                }
                layer.confirm('确定删除这' + data.length + '列吗?', function () {
                    $.ajax({
                        type: 'POST',
                        url: '/Navigation/DeleteNavigationInfo',
                        data: { ids: list },
                        success: function (data) {
                            if (data == "ok") {
                                window.location.href = "/Navigation/NavigationInfoList";
                            }
                        },
                        //dataType: 'JSON'
                    });
                });
            },
            add: function () {
                window.location.href = "/Navigation/AddNavigationInfo";
            },
            isCheck: function () {
                table.reload("navigationTable", {
                    url: '/Navigation/Search',
                    method: 'POST', //方式
                    where: {
                        isCheck: true
                    },
                    id: 'navigationTable',
                    loading: true,
                    page: true
                });
            },
            notCheck: function () {
                table.reload("navigationTable", {
                    url: '/Navigation/Search',
                    method: 'POST', //方式
                    where: {
                        isCheck: false
                    },
                    id: 'navigationTable',
                    loading: true,
                    page: true
                });
            }
        };
        $('#btn-search').on('click', function () {
            var input_Name = $('#input-navigationName').val();

            table.reload("navigationTable", {
                url: '/Navigation/Search',
                method: 'POST', //方式
                where: {
                    NavigationName: input_Name
                },
                id: 'navigationTable',
                loading: true,
                page: true
            });
        });
        $('.btn-operation .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $('#btn-reset').on('click', function () {
            $('#input-navigationName').val('');
        });

        $('#navigationColumn').on('click', '.layui-btn', function () {
            var id = $(this).data('id');

            table.reload("navigationTable", {
                url: '/Navigation/GetNavigationByColumnId',
                method: 'POST', //方式
                where: {
                    columnId: id
                },
                id: 'navigationTable',
                loading: true,
                page: true
            });
        });
    });
</script>
